<template>
  <div>
    <!-- 1.登录头部导航提示 -->
    <van-nav-bar title="登录">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
    </van-nav-bar>

    <!-- 2.输入框 -->

    <van-form @submit="onSubmit">
      <van-field
        v-model.number="userInfo.username"
        name="mobile"
        placeholder="用户名"
        :rules="formRules.mobile"
        type="number"
      >
        <i slot="left-icon" class="data-left-icon iconfont icon-shouji"
          >手机号</i
        >
      </van-field>
      <van-field
        v-model="userInfo.password"
        type="password"
        name="password"
        placeholder="密码"
        :rules="formRules.password"
      >
        <i slot="left-icon" class="data-left-icon iconfont icon-mima"
          >&nbsp;&nbsp;密 码
        </i>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <!-- 点击跳转页面 -->
    <div class="jump">
      <span @click="$router.push('/registry')">前往注册</span>
      <span @click="$router.push('/reset')">忘记密码</span>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/login";

export default {
  name: "LoginIndex",
  data() {
    return {
      userInfo: {
        username: "",
        password: "",
      },
      formRules: {
        mobile: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "手机号码格式不对" },
        ],
        password: [
          { required: true, message: "请填写密码" },
          { pattern: /^[a-zA-Z0-9]{6}$/, message: "输入不正确" },
        ],
      },
    };
  },
  methods: {
    async onSubmit(values) {
      console.log("submit", values);
      try {
        // const {data:{data:token}} = await login(values);
        const res = await login(values);
        console.log(res.data.data.userInfo);
        // 2.设置共享数据
        this.$store.commit("setUserToken", res.data.data.token);
        this.$store.commit("setUserInfo", res.data.data.userInfo); //用户基本信息
        this.$router.push("/");//跳转页面
        // this.$toast.success("登录成功!");
      } catch (err) {
        console.log(err.message);
      }
    },
  },
};
</script>

<style scoped lang="scss">
// 在scss中的样式穿透是::v-deep 选择器{属性名:属性值;}
::v-deep .van-nav-bar__content {
  background-color: rgb(225, 28, 52) !important;
}
::v-deep .van-icon-arrow-left {
  color: #fff !important;
}
::v-deep .van-nav-bar__title.van-ellipsis {
  color: #fff;
}

// 238, 10, 36
::v-deep .van-button--info {
  background-color: rgb(238, 10, 36);
  border: 1px solid rgb(238, 10, 36);
}
.data-left-icon {
  font-size: 30px;
  // font-weight: bold;
  color: #666;
}
.data-left-icon:before {
  font-size: 36px;
  color: #464646;
  font-weight: bolder;
}
::v-deep .van-cell {
  display: flex;
  align-content: center;
}
::v-deep .van-field__left-icon i {
  width: 140px;
  display: flex;

  align-content: center;
}
.jump {
  display: flex;
  padding: 10px 30px;
  justify-content: space-between;
}
.jump span {
  color: rgb(253, 110, 145);
  font-size: 32px;
}
</style>
